<template>
    <div class="warp">
        <h3 class="title">{{newsInfo.title}}</h3>
        <p class="timeWarp">
            <span>发表时间：{{newsInfo.add_time | dateFormat}}</span>
            <span>点击：{{newsInfo.click}} 次</span>
        </p>
        <hr>
        <div class="content" v-html="newsInfo.content"></div>
        <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
    import comment from '../subcompenents/comment.vue';
    export default {
        data() {
            return {
                id: this.$route.params.id,
                newsInfo: []
            }
        },
        created() {
            this.getNewsInfo()
        },
        methods: {
            getNewsInfo() {
                this.$http.get('api/getnew/' + this.id).then(result => {
                    var res = result.body;
                    if (res.status === 0) {
                        console.log(res.message);
                        this.newsInfo = res.message[0]
                    } else {

                    }
                })
            }
        },
        components:{
            'comment-box': comment
        }
    }
</script>

<style scoped lang="scss">
    h3 {
        text-align: left;
        padding: 0 15px;
    }

    .timeWarp {
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        color: #226aff;
    }

    .content {
        padding: 15px;
        text-align: justify;
        font-size: 14px;
        color: #333333;
        img{
            display: block;
            width: 100%;
        }
    }
    .warp{
        padding-bottom: 50px;
    }
    .title{
        font-size: 18px;
    }
</style>